<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>营业日报</title>
		<!-- Bootstrap -->
		<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
		<link href="fonts/iconfont.css" rel="stylesheet">
		<link href="../assets/css/style.css" rel="stylesheet" />
		<link href="../assets/css/tabletable.css" rel="stylesheet" />
		<link href="../assets/css/content.css" rel="stylesheet" />
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		      <script src="../assets/js/html5shiv.min.js"></script>
		      <script src="../assets/js/respond.min.js"></script>
		      <![endif]-->
		<style type="text/css">
			@media only screen and (max-width: 767px) {
				.btn-header {
					width: 80%;
					display: block;
					margin-right: 10%;
				}
				.navbar-nav-lf-ul li {
					display: inline-block;
					text-align: center;
					width: 100%;
					margin-left: 0px;
				}
			}
		</style>
	</head>

	<body>
		<!--内容区域-->
		<div class="content">
			<!-- 头部 -->
			<nav class="navbar navbar-default content-header backf1 br0 mb0" role="navigation">
				<div class="container-fluid">
					<span class="nav-title-pre"></span>
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
		  						<span class="sr-only">Toggle navigation</span>
		  						<span class="icon-bar"></span>
		  						<span class="icon-bar"></span>
		  						<span class="icon-bar"></span>
		  					</button>

						<a class="navbar-brand" href="#">大圣烧烤门店</a>
					</div>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav navbar-nav-lf-ul">
							<li>桌位:12</li>
							<li>订单号:12401410212</li>
						</ul>
						<ul class="nav navbar-nav navbar-right">
							<li class="text-center">
								<button type="button" class="btn btn-info btn-header">返回</button>
							</li>
							<li>
								<button type="button" class="btn btn-info btn-header">经营分析</button>
							</li>
							<li>
								<button type="button" class="btn btn-info btn-header">餐厅实况</button>
							</li>
						</ul>
					</div>
					<!-- /.navbar-collapse -->
				</div>
				<!-- /.container-fluid -->
			</nav>
			<!-- 订单概览 -->
			<div class="content-header col-md-12">
				<div class="con-header">
					<div class="col-md-12 col-sm-12 col-xs-12 gaikuang_header">
						<span class="line-height-50 ">订单概况&nbsp;&nbsp;</span>
						<span class="line-height-50 fonts-color">2016-10-10(11:12)</span>
						<span class="line-height-50 text-right fonts-color">订单号:12401410212</span>
					</div>
				</div>
			</div>
			<div class="content-header hidden_top col-md-12">
				<div class=" border_1">
					<div class="table-responsive">
						<table class="table">
							<thead>
								<tr>
									<th class="firstth firstth2" valign="middle">单号</th>
									<th class="secondta secondta2">桌位</th>
									<th>金额</th>
									<th>菜品数</th>
									<th>人数</th>
									<th>人均</th>
									<th>退菜</th>
									<th>赠送</th>
									<th>状态</th>
									<th>下单时间</th>
								</tr>
							</thead>
							<tbody class="mytable boreder-lf-1">
								<tr>
									<td class="firsttd firsttd2" valign="middle">12401410212</td>
									<td class="secondta secondta2">02</td>
									<td>1</td>
									<td>55</td>
									<td>5</td>
									<td>50</td>
									<td>111</td>
									<td>55</td>
									<td>858</td>
									<td>989</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="row line-height-50">
						<div class="text-right mr15 col-md-12 col-sm-12 col-xs-12">已结算:1201元</div>
					</div>

				</div>
			</div>
			<div class="row"></div>
			<div class="container-fluid mt10">
				<div class="row">
					<div class="col-md-12 col-sm-12 col-xs-12 ddgk_title_head">
						<span>菜品明细</span>
						<span>2016-10-10(11:12)</span>
						<span class="right_sanjiao"><i class="iconfont iconfont_click icon-xiangshang"></i></span>
					</div>
					<div class="col-md-12 col-sm-12 col-xs-12 table_lf_rt table_fater_style">
						<div class="table-responsive">
							<table class="table">
								<thead>
									<tr>
										<th class="firstth" valign="middle">菜品</th>
										<th class="secondta">份数</th>
										<th>单价</th>
										<th>原价</th>
										<th>小计</th>
										<th>时间</th>
									</tr>
								</thead>
								<tbody class="mytable">
									<tr>
										<td class="firsttd" valign="middle">土豆片</td>
										<td class="secondta">1份</td>
										<td>1.5</td>
										<td>3.5</td>
										<td>36</td>
										<td>14:69</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">土豆片</td>
										<td class="secondta">1份</td>
										<td>1.5</td>
										<td>3.5</td>
										<td>36</td>
										<td>14:69</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">合计</td>
										<td class="secondta">8份</td>
										<td>50</td>
										<td>69</td>
										<td>89</td>
										<td>14:69</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
			<div class="container-fluid mt10">
				<div class="row">
					<div class="col-md-12 col-sm-12 col-xs-12 ddgk_title_head">
						<span>收银明细</span>
						<span class="right_sanjiao"><i class="iconfont iconfont_click icon-xiangshang"></i></span>
					</div>
					<div class="col-md-12 col-sm-12 col-xs-12 table_lf_rt table_fater_style">
						<div class="container-fluid line-height-50">
							<div class="row">
								<div class="col-md-4 col-sm-4 col-xs-12">总金额:0.5元</div>
								<div class="col-md-4 col-sm-4 col-xs-12">收银时间:2016-12-20 14:20</div>
								<div class="col-md-4 col-sm-4 col-xs-12">操作员:张三</div>
							</div>
						</div>
						<div class="table-responsive">
							<table class="table">
								<thead>
									<tr>
										<th class="firstth  firstth2" valign="middle">支付方式</th>
										<th class="secondta secondta2">支付金额(元)</th>
										<th>支付时间</th>
										<th>操作时间</th>
										<th>收银员</th>
									</tr>
								</thead>
								<tbody class="mytable">
									<tr>
										<td class="firsttd firsttd2" valign="middle">微信支付</td>
										<td class="secondta secondta2">0.5</td>
										<td>2016-12-20</td>
										<td>张三</td>
										<td>张三</td>
									</tr>
									<tr>
										<td class="firsttd firsttd2" valign="middle">合计</td>
										<td class="secondta secondta2">5000</td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>

			<div class="container-fluid mt10">
				<div class="row">
					<div class="col-md-12 col-sm-12 col-xs-12 ddgk_title_head">
						<span>用餐人员</span>
						<span class="right_sanjiao"><i class="iconfont iconfont_click icon-xiangshang"></i></span>
					</div>
					<div class="col-md-12 col-sm-12 col-xs-12 table_lf_rt table_fater_style">
						<div class="table-responsive">
							<table class="table">
								<thead>
									<tr>
										<th class="firstth" valign="middle">序号</th>
										<th class="secondta">头像</th>
										<th>昵称</th>
										<th>姓名</th>
										<th>储值卡</th>
										<th>卡券</th>
									</tr>
								</thead>
								<tbody class="mytable">
									<tr>
										<td class="firsttd" valign="middle">1</td>
										<td class="secondta">
											<img class="xq_table_img" src="../assets/images/20150805133816_X8zCQ.thumb.700_0.jpeg">
										</td>
										<td>张三</td>
										<td>张三</td>
										<td>0</td>
										<td>0</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">1</td>
										<td class="secondta">
											<img class="xq_table_img" src="../assets/images/20150805133816_X8zCQ.thumb.700_0.jpeg">
										</td>
										<td>张三</td>
										<td>张三</td>
										<td>0</td>
										<td>0</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">1</td>
										<td class="secondta">
											<img class="xq_table_img" src="../assets/images/20150805133816_X8zCQ.thumb.700_0.jpeg">
										</td>
										<td>张三</td>
										<td>张三</td>
										<td>0</td>
										<td>0</td>
									</tr>

								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../assets/js/jquery.min.js"></script>
		<script src="../assets/js/bootstrap.min.js"></script>
		<!-- <script src="../assets/js/tabletable.js"></script> -->
		<script type="text/javascript">
			$(".mytable").find("tr:even").addClass("oushu");
			$(".mytable").find("tr:odd").addClass("jishu");
			$(".mytable").find("tr:odd td:first-child").addClass("jishu");

			// 给第一列高度
			firstTrHeight()

			function firstTrHeight() {
				for(var i = $(".mytable tr").length - 1; i >= 0; i--) {
					var trht = $(".mytable tr")[i].offsetHeight
					var domtr = $(".mytable tr")[i];
					// 有30px的边距
					$(domtr).children('td').height(trht - 30);
					$(domtr).children('.firsttd').css('line-height', trht - 30 + 'px');
					$(domtr).children('.firsttd').css('overflow', 'hidden');

				};
			}

			$('.iconfont_click').on('click', function() {
				if($(this).hasClass('icon-xiangxia2')) {
					$(this).removeClass('icon-xiangxia2');
					$(this).addClass('icon-xiangshang')
					$(this).parent().parent().siblings('.table_fater_style').removeClass('hidden');
				} else {
					$(this).removeClass('icon-xiangshang');
					$(this).addClass('icon-xiangxia2')
					$(this).parent().parent().siblings('.table_fater_style').addClass('hidden');

				}
			})
		</script>
	</body>

</html>